<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- import CSS -->
    <link
      rel="stylesheet"
      href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css"
    />
    <style>
      html,
      body {
        margin: 0;
      }
      .el-header img {
        vertical-align: middle;
      }
      .el-header a {
        color: #666;
        text-decoration: none;
      }
      .el-table .el-table__cell {
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <el-container>
        <el-header height="150px">
          <div style="width: 1200px; margin: 0 auto">
            <img src="imgs/logo.png" style="width: 300px" alt="" />
            <a href="javascript:void(0)">首页</a>
            <el-divider direction="vertical"></el-divider>
            <a href="#">热点资讯</a>
            <el-divider direction="vertical"></el-divider>
            <a href="#">商家入驻</a>
            <el-divider direction="vertical"></el-divider>
            <a href="#">社会招聘</a>
            <el-divider direction="vertical"></el-divider>
            <a href="#">校园招聘</a>
            <el-divider direction="vertical"></el-divider>
            <a href="#">帮助</a>
          </div>
          <div style="background-color: #0aa1ed">
            <el-menu
              style="width: 1200px; margin: 0 auto"
              mode="horizontal"
              background-color="#0aa1ed"
              text-color="#fff"
              active-text-color="#D4F2E7"
              @select="handleSelect"
            >
              <el-menu-item index="1">精彩活动</el-menu-item>
              <el-menu-item index="2">精品女装</el-menu-item>
              <el-menu-item index="3">品牌男装</el-menu-item>
              <el-menu-item index="4">母婴产品</el-menu-item>
              <el-menu-item index="5">数码科技</el-menu-item>
              <div style="float: right; position: relative; top: 10px">
                <el-input type="text" placeholder="请输入搜索内容">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
              </div>
            </el-menu>
          </div>
        </el-header>
        <el-main style="width: 1200px; margin: 0 auto">
          <el-row gutter="20">
            <el-col span="18">
              <!-- 走马灯开始 -->
              <el-carousel height="300px">
                <el-carousel-item>
                  <img src="imgs/b1.jpg" width="100%" height="100%" alt="" />
                </el-carousel-item>
                <el-carousel-item>
                  <img src="imgs/b2.jpg" width="100%" height="100%" alt="" />
                </el-carousel-item>
                <el-carousel-item>
                  <img src="imgs/b3.jpg" width="100%" height="100%" alt="" />
                </el-carousel-item>
              </el-carousel>
              <!-- 走马灯结束 -->
            </el-col>
            <el-col span="6">
              <!-- 排行开始 -->
              <el-card>
                <h3>
                  <i style="font-weight: bold" class="el-icon-trophy"
                    >销量最高</i
                  >
                </h3>
                <el-divider></el-divider>
                <el-table :data="topArr">
                  <el-table-column type="index" label="排名"></el-table-column>
                  <el-table-column prop="title" label="商品"></el-table-column>
                  <el-table-column
                    prop="saleCount"
                    label="销量"
                  ></el-table-column>
                </el-table>
              </el-card>
              <!-- 排行结束 -->
            </el-col>
          </el-row>
          <!-- 商品列表开始 -->
          <el-row gutter="20">
            <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
              <el-card>
                <img :src="p.url" width="100%" alt="" />
                <p style="font-size: 14px">{{ p.title }}</p>
                <p style="font-size: 14px">
                  ￥{{ p.price }} <s>{{ p.oldPrice }}</s>
                  <span style="float: right">销量:{{ p.saleCount }}</span>
                </p>
              </el-card>
            </el-col>
          </el-row>
          <!-- 商品列表结束 -->
        </el-main>
        <el-footer>
          <div
            style="background-image: url('imgs/wave.png'); height: 95px"
          ></div>
          <div
            style="
              text-align: center;
              background-color: #3f3f3f;
              color: #b1b1b1;
              padding: 30px 0;
            "
          >
            <p>
              Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3
              京公网安备 11010802029572号
            </p>
            <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
            <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
          </div>
        </el-footer>
      </el-container>
    </div>
  </body>
  <!-- import Vue before Element -->
  <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
  <!-- import JavaScript -->
  <script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
  <script>
    let v = new Vue({
      el: "#app",
      data: function () {
        return {
          topArr: [
            { title: "小米手机", saleCount: 1432 },
            { title: "安踏拖鞋", saleCount: 987 },
            { title: "李宁毛巾", saleCount: 957 },
            { title: "匹克跑鞋", saleCount: 842 },
            { title: "联想电脑", saleCount: 758 },
            { title: "华为电视", saleCount: 235 },
          ],
          productArr: [
            {
              title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古",
              price: 233,
              oldPrice: 598,
              url: "imgs/a.jpg",
              saleCount: 2342,
            },
            {
              title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",
              price: 233,
              oldPrice: 598,
              url: "imgs/b.jpg",
              saleCount: 2342,
            },
            {
              title:
                "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季上衣潮ins",
              price: 233,
              oldPrice: 598,
              url: "imgs/c.jpg",
              saleCount: 2342,
            },
            {
              title:
                "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚连帽外套冬",
              price: 233,
              oldPrice: 598,
              url: "imgs/d.jpg",
              saleCount: 2342,
            },
            {
              title:
                "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花宽松外套ins",
              price: 233,
              oldPrice: 598,
              url: "imgs/e.jpg",
              saleCount: 2342,
            },
            {
              title:
                "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领紫色呢子大衣",
              price: 233,
              oldPrice: 598,
              url: "imgs/f.jpg",
              saleCount: 2342,
            },
            {
              title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",
              price: 233,
              oldPrice: 598,
              url: "imgs/g.jpg",
              saleCount: 2342,
            },
            {
              title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598",
              price: 233,
              oldPrice: 598,
              url: "imgs/h.jpg",
              saleCount: 2342,
            },
            {
              title:
                "imone2021秋款黑色小西装外套女韩版学生宽松学院风外套jk外套",
              price: 233,
              oldPrice: 598,
              url: "imgs/i.jpg",
              saleCount: 2342,
            },
            {
              title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫衣情侣上衣",
              price: 233,
              oldPrice: 598,
              url: "imgs/j.jpg",
              saleCount: 2342,
            },
            {
              title:
                "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修身绵羊皮风衣外",
              price: 233,
              oldPrice: 598,
              url: "imgs/k.jpg",
              saleCount: 2342,
            },
            {
              title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色潮流女士牛仔",
              price: 233,
              oldPrice: 598,
              url: "imgs/a.jpg",
              saleCount: 2342,
            },
          ],
        };
      },
      methods: {
        handleSelect(key, keyPath) {
          console.log(key);
        },
      },
    });
  </script>
</html>
